<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<title>ECharts</title>
	<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
	<style type="text/css">
		h5{
			font-size: 16px;
			color: #1c1c26;
			text-align: justify;
			padding: 10px 20px;
		}
		.did{
			color: #4fd4c3;
		}
		.right{
			color: #46adef;
		}
		.wrong{
			color: #fdb255;
		}
		.mui-table-view-cell:after{
			right: 15px;
			background-color:#f3f3f5;
		}
		#detail{
			display: none;
		}
	</style>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height:360px"></div>
	<div id="detail">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<h5>您已经做过 <span id="did" class="did"> </span> 道题，占总题数的 <span id="didpercent" class="did"></span> </h5>
			</li>
			<li class="mui-table-view-cell">
				<h5>您共做对了 <span id="right" class="right"> </span> 道题，正确率为 <span id="rightpercent" class="right"></span> </h5>
			</li>
			<li class="mui-table-view-cell">
				<h5>您共做错了 <span id="wrong" class="wrong"> </span> 道题，错误率为 <span id="wrongpercent" class="wrong"></span> </h5>
			</li>
		</ul>
	</div>
	<!-- ECharts单文件引入 -->
	<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/echarts-all.js"></script>
	<script src="../script/blue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/lokijs.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/db.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		MYPAGE = {};
		apiready = function() {
			showWaiting();
			var db = new loki('data');
			db.loadDatabase({}, function() {
				var c = db.getCollection('answers');
				if (c == null) {
					c = db.addCollection('answers');
				}
				var wrong = {
					result: 1
				};
				var right = {
					result: 0
				}
				var rightcount = c.find(right).length;
				var wrongcount = c.find(wrong).length;
				//			var total = c.data.length;
				MYPAGE.count = {
					right: rightcount,
					wrong: wrongcount
				}
			});
			var func = function(db) {
				var sql = 'SELECT COUNT(*) as total FROM question';
				//				var func = function(db) {
				db.selectSql({
					name: 'data',
					sql: sql
				}, function(ret, err) {
					if (ret.status) {
						MYPAGE.count.total = ret.data[0].total;
						hideWaiting();
						// 基于准备好的dom，初始化echarts图表
						//		var myChart = echarts.init(document.getElementById('main'));
						var myChart = echarts.init(document.getElementById('main'), theme);
						option = {
							title: {
								text: '做题情况统计',
								subtext: '',
								x: 'center'
							},
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							legend: {
								orient: 'vertical',
								x: 'left',
								data: ['错误题', '正确题', '未做题']
							},
							calculable: true,
							series: [{
								name: '试题统计',
								type: 'pie',
								radius: '55%',
								center: ['50%', '60%'],
								data: [{
									value: MYPAGE.count.total-MYPAGE.count.right-MYPAGE.count.wrong,
									name: '未做题'
								}, {
									value: MYPAGE.count.right,
									name: '正确题'
								}, {
									value: MYPAGE.count.wrong,
									name: '错误题'
								}]
							}]
						};
						// 为echarts对象加载数据 
						myChart.setOption(option);
						
						var did = MYPAGE.count.right+MYPAGE.count.wrong;
						document.getElementById("did").innerHTML = did;
						var didpercent = Math.round(did/MYPAGE.count.total*10000)/100+"%";
						document.getElementById("didpercent").innerHTML = didpercent;
						document.getElementById("right").innerHTML = MYPAGE.count.right;
						var rightpercent =  Math.round(MYPAGE.count.right/did*10000)/100;
						if (isNaN(rightpercent)) {
							rightpercent = 0;
						}
						document.getElementById("rightpercent").innerHTML = rightpercent+"%";
						document.getElementById("wrong").innerHTML = MYPAGE.count.wrong;
						var wrongpercent =  Math.round(MYPAGE.count.wrong/did*10000)/100;
						if (isNaN(wrongpercent)) {
							wrongpercent = 0;
						}
						document.getElementById("wrongpercent").innerHTML = wrongpercent+"%";
						document.getElementById("detail").style.display = "block";
					} else {
						api.toast({
							msg: err.msg
						});
					}
				});
			}
			APP.openQDb(func);
		}
	</script>
</body>